<script setup>
import { formatPrice } from '../../utils/format';
import {ref} from 'vue'
import { routerTo } from '../../utils/common';
//数目
const num=ref()

const props=defineProps({
	good:{
		type:Object,
		default:{}
	},
	Type:{
		type:Number,
		default:0
	},
	sku:{
		type:Object,
		default:()=>({})
	}
})	


const emits=defineEmits(['selectBuy'])

const selectBuy=()=>{
	emits('selectBuy',{...props.good})
}

//查看商品详情
const handleDetails=()=>{
	routerTo("/pages/shop/details")
}

</script>


<template>
  <view class="card-goods-item" @tap="handleDetails"> 
    <view class="card-left">
		<image class="img" :src="good.goods_banner_img ||good.goods_banner_imgs?.[0]" mode="aspectFill"></image>
	</view>
	<view class="card-right">
		<view class="top-box" >
			<view class="title">{{good.name}}</view>
			<view class="sku" v-if="[2].includes(Type)">
				<view class="tag">{{good._skuInfo?.name}}</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="left">
				<view class="price-wrap">
					<view class="new">
						<text>￥</text>
						<view class="big">{{formatPrice(props.good.price||props.sku?.price||props.good._skuInfo?.price||0)}}</view>
					</view>
					<view class="old" v-if="props.good.market_price">￥{{formatPrice(props.good.market_price||sku?.market_price)}}</view>
				</view>
			</view>
			<view class="right">
				<view class="buy" @tap.stop="selectBuy" v-if="[1].includes(Type)">选购</view>
				<uv-number-box v-if="[2].includes(Type)" v-model="good._countNum"  :min="1" :max="10"></uv-number-box>
			</view>
		</view>
	</view>
  </view>
</template>


<style lang="scss" scoped>
.card-goods-item{
		width: 100%;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap:14rpx;
		.card-left{
			flex-shrink: 0;		
			height: 100%;
			aspect-ratio:1 / 1;			
			border-radius: 6rpx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.card-right{
			flex:1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top-box{
				.title{
					font-size: 28rpx;
					color: #000;
					@include text-ellipsis(2);
				}
				.sku{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 10rpx;
					.tag{
						padding: 6rpx 10rpx;
						font-size: 20rpx;
						color: #333;
						background-color: #f0f0f0;
						border-radius: 4rpx;
					}
				}
				.sku{
				  display: flex;
				  align-items: center;
				  flex-wrap: wrap;
				  margin-top: 10rpx;
				  .tag {
					padding: 6rpx 10rpx;
					font-size: 20rpx;
					color: #333;
					background-color: #f0f0f0;
					border-radius: 4rpx;
				  }
				}
			}
			.bottom-box{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.left{
					.price-wrap{
						font-size: 22rpx;
						.new{
							display: flex;
							font-weight: bolder;
							color:$uni-color-error;
							.big{
								font-size: 28rpx;;
							}
						}
						.old{
							font-size: 22rpx;
							color:#999;
							text-decoration: line-through;
						}
					}
				}
				.right{
					.buy{
						font-size: 24rpx;
						background: $uni-color-primary;
						border-radius: 40rpx;
						padding:12rpx 24rpx;
						color:#fff;
					}
				}
			}
		}
	}



</style>